<template>
  <vxe-grid border resizable height="400" :export-config="{}" :toolbar-config="{ custom: true }" :form-config="tableForm" :proxy-config="tableProxy" :columns="tableColumn">
    <template #btns>
      <vxe-button type="submit" content="查询"></vxe-button>
      <vxe-button type="reset" content="重置"></vxe-button>
    </template>
  </vxe-grid>
</template>
<script>
import VXETable from 'vxe-table';
// 创建一个简单的表单-输入框渲染
VXETable.renderer.add('FormItemInput', {
  // 项内容模板
  renderItemContent(h, renderOpts, params) {
    const { data, property } = params;
    const props = renderOpts.props || {};
    return [<vxe-input v-model={data[property]} {...{ props }}></vxe-input>];
  }
});
export default {
  data() {
    return {
      tableColumn: [
        { type: 'seq', width: 50 },
        { field: 'name', title: 'Name' },
        { field: 'age', title: 'Age' },
        { field: 'sex', title: 'Sex' },
        { field: 'role', title: 'Role' },
        { field: 'address', title: '地址' }
      ],
      tableForm: {
        items: [
          { field: 'name', title: '名称', itemRender: { name: 'FormItemInput', props: { clearable: true, placeholder: '请输入名称' } } },
          { field: 'age', title: '年龄', itemRender: { name: 'FormItemInput', props: { type: 'number', clearable: true, placeholder: '请输入年龄' } } },
          { field: 'form', title: '表单', itemRender: { name: 'FormItemInput', props: { type: 'number', clearable: true, placeholder: '请输入年龄' } } },
          { slots: { default: 'btns' } }
        ]
      },
      tableProxy: {
        form: true,
        ajax: {
          query: () => this.findList()
        }
      }
    };
  },
  methods: {
    findList() {
      return new Promise(resolve => {
        setTimeout(() => {
          const rest = [
            { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
            { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
            { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
            { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
            { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
            { id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: 21, address: 'Shenzhen' },
            { id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: 29, address: 'Shenzhen' },
            { id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: 35, address: 'Shenzhen' }
          ];
          resolve(rest);
        }, 200);
      });
    }
  }
};
</script>
<style lang="scss" scoped></style>
